<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="queryList"
      @clear="clear"
    >
      <template v-if="meta.indexOf('RefundRecordExcel') > -1" #btns>
        <el-button :loading="exportLoading" type="primary" @click="exportExcel">{{ $t('message.daochu') }}</el-button>
      </template>
    </QueryForm>
    <div v-if="tjList && tjList.length > 0" class="total_wrapc">
      <div class="first item">
        <div class="key">{{ $t('message.shanxuan') }}</div>
        <div class="key">{{ $t('message.heji') }}</div>
      </div>
      <div class="item_list">
        <div v-for="(item, i) in tjList" :key="i" class="item">
          <div class="key">{{ item.name }}</div>
          <div class="value">
            <span class="price">{{ item.value }}</span>
          </div>
        </div>
      </div>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="$t('message.tkdh')"
        show-overflow-tooltip
        prop="refundOrderId"
        min-width="240"
      />
      <el-table-column
        align="center"
        :label="$t('message.yddh')"
        show-overflow-tooltip
        prop="orderId"
        min-width="220"
      />
      <el-table-column
        align="center"
        :label="$t('message.ywlx')"
        show-overflow-tooltip
        prop="orderTypeName"
        min-width="140"
      />
      <el-table-column
        align="center"
        :label="$t('message.tksj')"
        show-overflow-tooltip
        prop="refundTime"
        min-width="180"
      />
      <el-table-column
        align="center"
        :label="$t('message.ytje')"
        show-overflow-tooltip
        prop="oldMoney"
        min-width="80"
      />
      <el-table-column
        align="center"
        :label="$t('message.stje')"
        show-overflow-tooltip
        prop="money"
        min-width="80"
      />
      <el-table-column
        align="center"
        :label="$t('message.tkfs')"
        show-overflow-tooltip
        prop="payMethod"
        min-width="120"
      >
        <template v-slot="scope">
          <span>{{ scope.row.payMethodName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('message.bz')"
        show-overflow-tooltip
        prop="remarks"
        min-width="120"
      />
      <el-table-column
        align="center"
        :label="$t('message.czr')"
        show-overflow-tooltip
        prop="creatorName"
        min-width="100"
      />
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="currentChange"
      @SizeChange="handleSizeChange"
    />
  </div>
</template>

<script>
import { OrderRefundRecord, allConfigList, OrderRefundType, OrderRefundRecordExport } from '@/api'
import { queryFormConfig } from './config'
import dayjs from 'dayjs'
import QueryForm from '@/components/QueryForm'
export default {
  components: {
    QueryForm
  },
  data() {
    return {
      totalCount: 0,
      queryFormConfig,
      list: [],
      meta: [],
      tjList: [],
      filters: {
        dates: []
      },
      exportLoading: false,
      smTip: '',
      listLoading: false,
      pagination: {
        page: 1,
        rows: 10
      },
      payMap: {}
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    const start = new Date()
    const end = new Date()
    start.setTime(end.getTime() - 3600 * 1000 * 24 * 29)
    const dates = [dayjs(start).format('YYYY-MM-DD'), dayjs(end).format('YYYY-MM-DD')]
    this.filters.dates = dates
    this.getConsumeTypeList()
    this.queryList()
    this.getPayMethods()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated() {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    getList() {
      const { pagination } = this
      const filters = { ...this.filters }
      if (filters.dates && filters.dates.length > 0) {
        filters.startTime = filters.dates[0]
        filters.endTime = filters.dates[1]
      } else {
        filters.startTime = ''
        filters.endTime = ''
      }
      this.listLoading = true
      OrderRefundRecord({ param: filters, pagination }).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.totalCount = res.totalCount
          this.list = res.recordList
          const tjList = res.data
          if (tjList) {
            let smTip = ''
            tjList.forEach(s => {
              smTip = smTip + s.tip + '<br />'
            })
            this.tjList = tjList
            this.smTip = smTip
          }
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
        }
      }, () => {
        this.listLoading = false
      })
    },
    exportExcel() {
      this.exportLoading = true
      const { filters } = this
      if (filters.dates && filters.dates.length > 0) {
        filters.startTime = filters.dates[0]
        filters.endTime = filters.dates[1]
      } else {
        filters.startTime = ''
        filters.endTime = ''
      }
      OrderRefundRecordExport({
        param: { ...filters, venueId: sessionStorage.getItem('venueId') }
      })
        .then((res) => {
          this.exportLoading = false
          if (res.errorCode === '000000') {
            window.open(res.record.showUrl, '_blank')
          }
        })
        .catch(() => { this.exportLoading = false })
    },
    getConsumeTypeList() {
      OrderRefundType({
        param: {
          type: 'ORDER_TYPE_REFUND_QUERY'
        }
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            const arr = res.recordList
            arr.forEach(e => {
              e.label = e.name
              e.value = e.id
            })
            this.queryFormConfig.formItems[3].options = arr
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getPayMethods() {
      allConfigList({ param: { type: '2', code: '1' }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          const arr = res.recordList
          arr.forEach(e => {
            e.label = e.name
            this.payMap[e.value] = e.name
          })
          this.queryFormConfig.formItems[2].options = arr
          console.log('this.payMap', this.payMap)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    queryList() {
      this.pagination.page = 1
      this.getList()
    },
    clear() {
      this.filters = {
        dates: []
      }
      this.queryList()
    },
    currentChange(val) {
      this.pagination.page = val
      this.getList()
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    }
  }
}
</script>
